
{% extends 'mybase2.html' %}

{% block title %} 用户注册 {% endblock %}

{% block style %} 
    {{ super() }}
    <style>
        #container{
            padding-top: 30px;
            width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        #container h1{
            text-align: center;
            margin-bottom: 50px;
        }
        #container form{
           
            margin: 0 auto;
        
        }

    </style>
{% endblock %}

{% block content %}
    <div id="container" >   
        <h1 style="text-align:center">用户注册</h1>   
        <hr>  
        <form action="{{ url_for('user.register') }}" method="post">
            <div class="form-group row">
                <label for="inputUsername" class="col-md-2 col-form-label">用户名</label>
                <div class="col-md-6">
                    <input type="text" name="username" class="form-control" id="inputUsername" placeholder="请输入用户名">
                </div>
            </div>

            <div class="form-group row">
                <label for="inputPassword" class="col-md-2 col-form-label">密码</label>
                <div class="col-md-6">
                    <input type="password" name="password" class="form-control" id="inputPassword" placeholder="请输入密码">
                </div>
            </div>

             <div class="form-group row">
                <label for="inputConfirm" class="col-md-2 col-form-label">确认密码</label>
                <div class="col-md-6">
                    <input type="password" name="repassword" class="form-control" id="inputConfirm" placeholder="请确认密码">
                </div>
            </div>

            
             <div class="form-group row">
                <label for="inputPhone" class="col-md-2 col-form-label">手机号码</label>
                <div class="col-md-6">
                    <input type="text" name="phone" class="form-control" id="inputPhone" placeholder="请输入手机号码">
                    {# 用于提示手机号是否已经注册 #}
                    <span></span>
                </div>
            </div>

            <div class="form-group row">
                <label for="inputEmail" class="col-md-2 col-form-label">邮箱</label>
                <div class="col-md-6">
                    <input type="email" name="email" class="form-control" id="inputEmail" placeholder="请输入邮箱">
                </div>
            </div>

            <div class="form-group row">
                <div class="col-sm-offset-4 col-md-10">
                    <button type="submit" class="btn btn-primary col-md-2">注&nbsp;&nbsp;&nbsp;册</button>
                    <button type="submit" class="btn btn-primary col-md-2">重&nbsp;&nbsp;&nbsp;置</button>
                </div>
            </div>
        </form>
    </div>

{% endblock %}

{% block script %}
    {{ super()}}
    <script>
        
        // 光标离开后发送ajax请求，校验手机号是否已经注册
        $('#inputPhone').blur(function() {            
            let phone = $(this).val();
            let span_ele = $(this).next('span'); // 提示手机号的长度是否为11

            if (phone.length == 11){
                // 发送get 请求，参数为phone -->
                $.get("{{ url_for('user.check_phone') }}",{phone:phone},function(data){
                    // console.log(data);
                    if (data.code != 200){
                        span_ele.css('color','red');
                        span_ele.text(data.msg);
                    }else{
                        span_ele.css('color','green');
                        span_ele.text(data.msg);
                    }
                })
            }
            else {
                span_ele.css('color','red')
                span_ele.text('手机号码格式不正确')
            } 
        })

        
    </script>
{% endblock %}